<template>
  <!-- style="background-color: #8a8a8a;" -->
  <q-page :class="{ center: !isWeChat() }" >
    <!-- <div v-if="isWeChat()" class="" style="background-color: black; width: 100%; height: 100vh"> -->
    <div v-if="true" class="" style="background-color: black; width: 100%; height: 100vh">
      <img src="~/assets/images/prod/ydbg.png" alt="ydbg" class="ydbg-img" />
      <div class="fixed-full">
        <!-- <img src="~/assets/images/prod/yd_image.png" alt="ydbg" class="ydbg-img1" /> -->

        <div class="ydbg-img1">
          <q-img
            src="~/assets/images/prod/yd_image.png"
            :ratio="228 / 125"
            no-spinner
            width="100%"
            no-transition
          />
          <div class="btn-copy" @click="copyLink"></div>
        </div>

        <div class="absolute jiantou jiantou-top" style="">
          <img src="~/assets/images/prod/yd_image1.png" alt="ydbg" class="block absolute" style="width: 90%; right: 0;top: 0;" />
          <img src="~/assets/images/prod/yd_image2.png" alt="ydbg" class="block absolute" style="width: 30%; left: 0;bottom: 0;" />
        </div>
        <div class="absolute jiantou jiantou-bottom" style="">
          <img src="~/assets/images/prod/yd_image1.png" alt="ydbg" class="block absolute" style="width: 90%; right: 0;bottom: 0;transform: rotateX(180deg);" />
          <img src="~/assets/images/prod/yd_image2.png" alt="ydbg" class="block absolute" style="width: 30%; left: 0;top: 0;" />
        </div>
      </div>
    </div>
    <q-spinner v-else color="primary" size="70px" :thickness="3" />
  </q-page>
</template>

<script setup lang="ts">
import { isWeChat } from 'src/utils/lib';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import copy from 'copy-to-clipboard';
import { showToast, } from 'vant';
const route = useRoute();
const router = useRouter();

const jumpUrl = route.query.jumpUrl ? decodeURIComponent(route.query.jumpUrl as string) : '';

// if (!isWeChat()) {
//   jumpUrl ? (location.href = jumpUrl) : router.replace({ path: '/', query: route.query });
// }

const copyLink = () => {
  copy(jumpUrl)
  showToast('已成功复制链接')
}
</script>

<style lang="scss" scoped>
.ydbg-img {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ydbg-img1 {
  width: 74%;
  position: absolute;
  top: 20%;
  left: 13%;
  .btn-copy{
    position: absolute;
    width: 46%;
    left: 30%;
    height: 29%;
    bottom: 0%;
  }
}
.jiantou{
  $width: 40px;
  width: $width;
  height: calc($width / 0.6);
  &.jiantou-top{
    // background-color: red;
    right: 20px;
    top: 20px;
  }
  &.jiantou-bottom{
    right: 14%;
    top: 45%;
  }
}
</style>
